<template>
  <div id="satisfaction_tab">
    <header class="header clearfix">
      <div class="title f-18" :style="{ 'margin-left': isMobile ? '8px' : '30px' }">
        业主NCR
      </div>
    </header>
    <section>
    <div class="status">
      <div class="item">
        <div class="color-close close"></div>
        <div class="text">已关闭</div>
      </div>
        <div class="item">
        <div class="color-unclose close"></div>
        <div class="text">已关闭</div>
      </div>
    </div>
      <Charts  :data="listArray" v-if="listArray.length" :pieId="'ids'" :isMobile="isMobile" style="max-width:500px !important;max-height:500px !important;margin:0 auto !important;"></Charts>
    </section>
  </div>
</template>
<script>
import Charts from './pie_chart.vue'
export default {
  data () {
    return {}
  },
  props: {
    isMobile: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    listArray: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    Charts
  }
}
</script>
<style lang="scss" scoped>
#satisfaction_tab {
  border: 1px solid #ffffff;
  height: 100%;
  overflow: hidden;
  .header {
    height: 40px;
    width: 100%;
    margin-top: 20px;
    .title {
      margin-left: 30px;
      margin-top: 11px;
      height: 18px;
      line-height: 18px;
      padding-left: 10px;
     font-weight: 700;
      color: #ffffff;
    }
  }
  section {
    padding: 20px 20px 0;
    position: relative;
    height: calc(100% - 60px);
    .status {
      position: absolute;
      display:flex;
      width:240px;
      right: 0;
      top: -10px;
      .item {
        flex:1;
        display:flex;
        .text {
          color:#fff;
          font-size: 14px;
          font-weight: 600;
        }
        .close {
          margin-right: 6px;
          width:20px;
          height: 20px;
        }
        .color-close {
          background: #9ed286
        }
        .color-unclose {
          background: #00b3f6
        }
      }
    }
  }
}

  .f-18 {
    font-size: 18px !important;
  }
</style>
